<template>
  <div class="box">
    <div class="hang">
      <div class="b1">爆爆团</div>
      <div class="di">
        <span class="iconfont icon-gengduo"></span>
        <span class="iconfont icon-iconfontcolor96"></span>
      </div>
    </div>
    <div class="hang5">规则</div>
    <div class="hang2">限时爆款超级低价</div>

    <div class="hang1">即将开抢</div>
    <div class="hang3">
      <span
        :class="{ h3: true, active: zxcvindex == lin }"
        v-for="(it, lin) in lei"
        :key="lin"
        @click="qianggou(lin)"
        >{{ it.text }}</span
      >
    </div>
    <div class="hang4" v-for="(item, index) in lists" :key="index">
      <div class="i1"><img :src="item.picture" alt="" /></div>
      <div class="i2">
        <div>{{ item.name }}</div>
        <div>{{ item.month_saled_content }}</div>
        <div>{{ item.min_price }}</div>
        <div>
          <span class="zx1">{{ item.promotion_info }}</span>
          <span class="zx2" @click="shijian(item)">{{
            item.status == 0 ? "马上抢" : "已抢"
          }}</span>
        </div>
        <div class="zx">{{ item.unit }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { tuan_list } from "../api/index";
import { ref, onMounted } from "vue";
var lei = ref([
  { ip: 1, text: "正在抢购" },
  { ip: 2, text: "上新预告" },
]);
var zxcvindex = ref(0);
var lists = ref([]);

var qianggou = (lin) => {
  zxcvindex.value = lin;
  if (lin == 0) {
    tuan_list({ status: 0 }).then((res) => {
      console.log(res.data);
      lists.value = res.data.list;
    });
  } else {
    tuan_list({ status: 1 }).then((res) => {
      lists.value = res.data.list;
    });
  }
};
var shijian=(item)=>{
    if (item.status == 0) {
        item.status = 1;
      }
}
onMounted(() => {
  tuan_list({ status: 0 }).then((res) => {
    lists.value = res.data.list;
  });
});
</script>

<style scoped>
.box {
  height: 260px;
  /* background-color:#ff4f00; */
  background: linear-gradient(to bottom, #e93323, #f1ab3c);
  padding: 10px 20px;
}
.hang {
  color: white;
}
.b1 {
  font-size: 35px;
  float: left;
  margin-left: 110px;
  font-family: cursive;
}
.di {
  width: 80px;
  height: 40px;
  border-radius: 20px;
  background-color: #c62a1c;
  padding: 0 5px;
  float: right;
}
.iconfont {
  font-size: 26px;
  line-height: 36px;
}
.icon-gengduo {
  margin-right: 15px;
}
.hang2 {
  clear: both;
  color: white;
  height: 50px;
  font-size: 32px;
  font-family: cursive;
  margin-left: 20px;
}

.hang5 {
  clear: both;
  width: 40px;
  margin-top: 70px;
  margin-left: 280px;
  color: #eee;
}
.hang3 {
  color: white;
  font-size: 18px;
}
.h3 {
  margin-right: 10px;
}
.hang4 {
  font-size: 18px;
  margin-top: 30px;
  /* width: 370px;
  height: 150px; */
  border: 1px solid #eee;
  border-radius: 10px;
  margin-top: 10px;
  background-color: white;
  display: flex;
}
.i1 {
  width: 160px;
  height: 160px;
  margin: 10px;
}
.i2 {
  flex: 1;
}
.i2 div {
  margin-top: 3px;
}
.i2 div:nth-child(1) {
  font-weight: bold;
}
.i2 div:nth-child(2) {
  color: red;
}
.i2 div:nth-child(3) {
  color: red;
  font-size: 22px;
}
img {
  width: 100%;
}
.active {
  display: inline-block;
  font-weight: bold;
  border-bottom: 3px solid white;
  height: 40px;
  line-height: 40px;
}
.zx {
  clear: both;
}
.zx1 {
  float: left;
}
.zx2 {
  display: inline-block;

  width: 80px;
  height: 40px;
  border-radius: 20px;
  line-height: 40px;
  text-align: center;
  background-color: #eb4f27;
  color: white;
}
.hang1 {
  width: 70px;
  height: 20px;
  color: #c62a1c;
  border-radius: 15px;
  background-color: white;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  margin-left: 85px;
  margin-top: 20px;
}
</style>